import Pagination from "@lib/Pagination";
import type { RouteDefinition } from "@solidjs/router";

const PaginationDemo = () => {
  return (
    <div>
      <Pagination
        totalCount={100}
        defaultSize={30}
        onChanged={(page, size) =>
          console.log("pagination changed", page, size)
        }
      ></Pagination>
      <hr></hr>
      <h1>Size</h1>
      <Pagination
        totalCount={100}
        defaultSize={30}
        size="sm"
        onChanged={(page, size) =>
          console.log("pagination(sm) changed", page, size)
        }
      ></Pagination>
      <Pagination
        totalCount={100}
        defaultSize={30}
        size="lg"
        onChanged={(page, size) =>
          console.log("pagination(lg) changed", page, size)
        }
      ></Pagination>
      <hr></hr>
      <h1>Zip</h1>
      <Pagination
        totalCount={100}
        defaultSize={3}
        onChanged={(page, size) =>
          console.log("pagination(zip) changed", page, size)
        }
      ></Pagination>
      <hr></hr>
      <h1>对齐</h1>
      <nav>
        <Pagination
          classList={{ "justify-content-center": true }}
          totalCount={100}
          defaultSize={3}
          onChanged={(page, size) =>
            console.log("pagination(zip) changed", page, size)
          }
        ></Pagination>
      </nav>

      <h1>展示总数</h1>
      <nav>
        <Pagination
          showTotal
          classList={{ "justify-content-center": true }}
          totalCount={100}
          defaultSize={3}
          onChanged={(page, size) =>
            console.log("pagination(zip) changed", page, size)
          }
        ></Pagination>
      </nav>
    </div>
  );
};

export const PaginationDemoRoute: RouteDefinition = {
  path: "/pagination",
  component: PaginationDemo,
};

export default PaginationDemo;
